<script setup>

</script>

<template>
  <div class="contain">
    <div style="display: flex;flex-direction: row;width: 70%;overflow: hidden;height: 70%;border: 1px solid gray;border-radius: 20px;background: aliceblue">
      <div style="width:50%;overflow: hidden;">
        <img style="" src="@/assets/imgs/login.png">
      </div>
      <div style="display: flex;flex-direction: column;width:50%;align-items: center;justify-content: center;padding: 20px">
        <form style="width: 80%;height: 80%;text-align: center">
          <h2>注册</h2>
          <div style="padding: 20px">
            <label>用户名：</label>
            <input>
          </div>
          <div style="padding: 20px">
          <label>电话号码：</label>
          <input>
          </div>
          <div style="padding: 20px">
            <label>密码：</label>
            <input>
          </div>
          <div style="padding: 20px">
            <label>确认密码：</label>
            <input>
          </div>
          <div style="padding: 20px">
          <button>登录</button>
          <button>取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<style scoped>
.contain {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center
}
</style>